<template>
  <div>
    <Header class="header" @exportExcel="exportExcel(filterJson(usersList),'用户列表数据')" />

    <el-table :data="usersList" style="width: 100%" :default-sort="{ prop: 'id', order: 'ascending' }" border>
      <el-table-column prop="id" label="ID" min-width="130" sortable fixed />
      <el-table-column prop="username" label="用户名" min-width="130" sortable />
      <el-table-column prop="role_name" label="角色" min-width="130" sortable>
        <!-- 自定义label表头 -->
        <template #header>
          <el-tooltip effect="dark" content="点击角色按钮可修改角色权限" placement="top-start" :enterable="false">角色</el-tooltip>
        </template>
        <template v-slot="scope">
          <!-- <el-tooltip effect="dark" content="点击修改角色权限" placement="top" :enterable="false"> -->
          <el-button :type="scope.row.role_name == '超级管理员' ? 'danger' : 'success'" plain class="roleBtn"
            @click="editRoleClick(scope.row)">{{ scope.row.role_name }}
          </el-button>
          <!-- </el-tooltip> -->
        </template>
      </el-table-column>
      <el-table-column prop="mg_state" label="状态" min-width="150" sortable>
        <template v-slot="scope">
          <el-switch v-model="scope.row.mg_state" active-text="启用" inactive-text="禁用" @click="switchClick(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="电话" min-width="130" />
      <el-table-column prop="email" label="邮箱" min-width="180" />
      <el-table-column prop="create_time" label="创建时间" min-width="180" sortable>
        <template v-slot="scope">
          {{ formatDate(scope.row.create_time, "yyyy-mm-dd HH:MM:ss") }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="130">
        <!-- 自定义label表头 -->
        <template #header>
          <el-input v-model="search" size="small" placeholder="当前页ID查找" />
        </template>
        <template v-slot="scope">
          <el-row :gutter="10" justify="space-between">
            <!-- 编辑 -->
            <el-col :span="12">
              <el-button type="primary" size="small" :plain="true" @click="editClick(scope.row)">编辑</el-button>
            </el-col>
            <!-- 删除 -->
            <el-col :span="12">
              <el-popconfirm title="你确定要删除这一条记录吗?" @confirm="confirmClick(scope.row)">
                <template #reference>
                  <el-button type="danger" size="small" :plain="true">删除</el-button>
                </template>
              </el-popconfirm>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <Footer class="footer" />
  </div>
</template>

<script setup>
import { exportExcel } from "@/utils/exportExcel.js"// 导出excel
import Header from "@/views/Users/Users/components/header.vue";
import Footer from "@/views/Users/Users/components/footer.vue";
import { formatDate } from "@/utils/dataFormat";
import { ref, computed } from "vue";
import useStore from "@/pinia/index.js";

const { users } = useStore();

// 获取用户列表
users.REQUEST_usersList();

// 过滤关键字
const search = ref("");
// 获取store中的users数据,过滤数据
const usersList = computed(() => users.usersList.filter(
  // item => !search.value || item.username.toLowerCase().includes(search.value.toLowerCase())//用户名匹配
  item => !search.value || item.id.toString().includes(search.value)//ID匹配
));

// 过滤json数据，让表头显示中文
function filterJson(json) {
  const data = json.map(v => ({
    id: v.id,
    用户名: v.username,
    角色: v.role_name,
    状态: v.mg_state,
    电话: v.mobile,
    邮箱: v.email,
    创建时间: formatDate(v.create_time, "yyyy-mm-dd HH:MM:ss")
  }));
  return data;
}

// 按钮切换状态
const switchClick = (row) => {
  users.REQUEST_usersStatus(row.id, row.mg_state);
};

// 删除用户
const confirmClick = async (row) => {
  await users.REQUEST_usersDelete(row.id);
  // 等待删除执行完再重新获取用户列表
  users.REQUEST_usersList();
};

// 点击编辑，保存当前行信息
const editClick = (row) => {
  // 将当前行信息保存到store中
  users.editUsers = row;
  // 显示弹出框
  users.editDialogVisible = true;
};
// 点击修改角色按钮
const editRoleClick = (row) => {
  // 将当前行信息保存到store中
  users.editRole = row
  users.REQUEST_rolesList()
  // 显示抽屉
  users.editDrawer = true
}
</script>

<style lang="less" scoped>
.header {
  margin-bottom: 20px;
}

.footer {
  margin-top: 20px;
}

.roleBtn {
  width: 100%;
}
</style>
